<template>
    <div class="fenlei1">
        <div class="box">
            <div class="left">
                <van-sidebar v-model="active" @change="onChange" class="leftdaohang">
                    <van-sidebar-item v-for="item in categoryListArr" :title="item.name" :key="item.id"/>
                </van-sidebar>
            </div>
            <div class="right">
                    <img :src="(currentCategory as Icurrentcategory).banner_url" alt="">
                    <h5>{{ (currentCategory as Icurrentcategory).front_desc }}</h5>
                    <div>
                    <h3>{{ (currentCategory as Icurrentcategory).name }}</h3>
                    <van-grid :column-num="3">
                        <van-grid-item v-for="item in (currentCategory as Icurrentcategory).subCategoryList" :icon="item.banner_url" 
                        :key="item.id"
                        :text="item.name" />
                    </van-grid>
                    </div>
            </div>
        </div>
    </div>
</template>
<script name="fhdFenLei" lang="ts" setup>
import { getfenleialldata,getcurrentfenleidata} from '../../api/fenlei'
import { onMounted,ref } from 'vue';
import type { Fenleiitem,Icurrentcategory } from '../../types/fenlei'
const categoryListArr  = ref<Array<Fenleiitem>>([])
const active = ref<number>(0)
const currentCategory =ref<Icurrentcategory|{}>({})
const onChange = (index:number) => {
    // console.log(index);
    let id = categoryListArr.value[index].id
    // console.log(id);
    
    getcurrentfenleidata({id}).then(res =>{
        // console.log(res);
        currentCategory.value = res.data.currentCategory
        
    })
}




onMounted(()=>{
    getfenleialldata().then(res =>{
        // console.log(res);
        categoryListArr.value = res.data.categoryList
        currentCategory.value = res.data.currentCategory
    })
})

</script>
<style scoped lang="scss">
    .fenlei1{
        .box{
            display: flex;
            .right{
                flex: 1;
                position: relative;
                img{
                    width: 90%;
                    display: block;
                    margin: 0 auto;
                }
                h5{
                    position: absolute;
                    text-align: center;
                    left: 50%;
                    transform: translate(-50%);
                    right: 0;
                    top: 40px;
                }
                h3{
                    text-align: center;
                    margin: 20px 0;
                }
            }
        }
    }
</style>